<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Login Form</title>

	<link rel="stylesheet" href="../public/normalize.css">

	<style type="text/css">
		.btn {
			display: inline-block;
			*display: inline;
			*zoom: 1;
			padding: 4px 10px 4px;
			margin-bottom: 0;
			font-size: 13px;
			line-height: 18px;
			color: #333333;
			text-align: center;
			text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
			vertical-align: middle;
			background-color: #f5f5f5;

			background-image: linear-gradient(top, #ffffff, #e6e6e6);
			background-repeat: repeat-x;
			filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
			border-color: #e6e6e6 #e6e6e6 #e6e6e6;
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
			border: 1px solid #e6e6e6;

			border-radius: 4px;

			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
			cursor: pointer;
			*margin-left: .3em;
		}

		.btn:hover,
		.btn:active,
		.btn.active,
		.btn.disabled,
		.btn[disabled] {
			background-color: #e6e6e6;
		}

		.btn-large {
			padding: 9px 14px;
			font-size: 15px;
			line-height: normal;
			border-radius: 5px;
		}

		.btn:hover {
			color: #333333;
			text-decoration: none;
			background-color: #e6e6e6;
			background-position: 0 -15px;
			transition: background-position 0.1s linear;
		}

		.btn-primary,
		.btn-primary:hover {
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			color: #ffffff;
		}

		.btn-primary.active {
			color: rgba(255, 255, 255, 0.75);
		}

		.btn-primary {
			background-image: linear-gradient(top, #6eb6de, #4a77d4);
			background-repeat: repeat-x;
			filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);
			border: 1px solid #3762bc;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
		}

		.btn-primary:hover,
		.btn-primary:active,
		.btn-primary.active,
		.btn-primary.disabled,
		.btn-primary[disabled] {
			filter: none;
			background-color: #4a77d4;
		}

		.btn-block {
			width: 100%;
			display: block;
		}

		* {
			box-sizing: border-box;
		}

		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		body {
			width: 100%;
			height: 100%;
			font-family: 'Open Sans', sans-serif;
			background: #092756;
			background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3E1D6D', endColorstr='#092756', GradientType=1);
		}

		.login {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -150px 0 0 -150px;
			width: 300px;
			height: 300px;
		}

		.login h1 {
			color: #fff;
			text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			letter-spacing: 1px;
			text-align: center;
		}

		input {
			width: 100%;
			margin-bottom: 10px;
			background: rgba(0, 0, 0, 0.3);
			border: none;
			outline: none;
			padding: 10px;
			font-size: 13px;
			color: #fff;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
			border: 1px solid rgba(0, 0, 0, 0.3);
			border-radius: 4px;
			box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
			transition: box-shadow .5s ease;
		}

		input:focus {
			box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
		}
	</style>
</head>

<body>
	<div class="login">
		<h1>Login</h1>
		<div>
			<input type="text" name="u" placeholder="用户名" required="required" />
			<input type="password" name="p" placeholder="密码" required="required" />
			<input type="text" placeholder="验证密码" required;>
			<button type="submit" class="btn btn-primary btn-block btn-large logins">登录</button>
		</div>
	</div>
</body>
<script src="../public/jquery3.5.1.min.js"></script>
<script>
	$(".logins").click(function(){
		console.log($("input").eq(0).val(),);
		$.ajax({
			url:"http://192.168.1.7:8989/logins",
			method:"get",
			data:{
				user:$("input").eq(0).val(),
				pasd:$("input").eq(1).val(),
				// npas:$("input").eq(2).val(),
			},
			success:function(res){
				console.log(res);
				if(res.length>0){
					location.href="http://192.168.1.7:8989/chat"
				}
			}
		})
	})
</script>
</html>